<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>
  <body>
    <!-- 
    Vue模板中的插值语法:
      * 插值语法主要用在模板标签的内容区域引入js表达式使用(!!!在模板标签的属性区域是不能使用的)
      * Vue的插值语法使用双大括号呈现({{}})
      * Vue的插值语法主要可以书写3种内容
        - 直接书写一个值
        - 书写一个实例上的属性 或 方法调用
        - 书写一个表达式(会返回一个值)
      * 插值中各种类型值的转换规则:除了undefined和null转为空串以外,其他类型都是正常转为字符串
   -->
    <div id="app">
      <h1>{{1}}</h1>
      <h1>{{count}}</h1>
      <h1>{{isHot?"真热":"真冷"}}</h1>
      <h1>{{name.toUpperCase()}}</h1>
      <h2>number:{{1}}</h2>
      <h2>string:{{"1"}}</h2>
      <h2>boolean:{{true}}</h2>
      <h2>null:{{null}}</h2>
      <h2>undefined:{{undefined}}</h2>
      <h2>symbol:{{sy1}}</h2>
      <h2>bigInt:{{1n}}</h2>
      <h2>对象:{{ {name:"张三"} }}</h2>
      <h2>数组:{{ [1,2,3,4,5] }}</h2>
      <h2>Date:{{ new Date() }}</h2>
      <h2>Reg:{{ /\s/g }}</h2>
    </div>
    <script>
      var a = 1;
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            count: 1,
            isHot: true,
            sy1: Symbol(),
            name: "lisi",
          };
        },
      });
    </script>
  </body>
</html>
